<template>
    <div style="width: 100%; height: 100%">
        <div style="width: 76%; height: 100%; float: right" class="D_1">
            <div style="width: 100%; height: 100%">
                <div style="width: 50%; height: 5%; margin: 0 auto; text-align: center; vertical-align: middle" class="d_2">
                    <input
                        type="text"
                        style="font-size: 30px; color: #ffffff; font-family: '宋体'; text-align: center; width: 90%"
                        disabled="disabled"
                        class="i_1"
                        v-model="data.proName"
                    />
                </div>
                <div style="width: 26.5%; height: 68%; float: left; padding: 6% 1%">
                    <table style="width: 100%; height: 100%; color: #fff; padding: 0% 0%" border="0">
                        <table style="width: 100%; height: 75%; color: #fff; padding: 0% 0%" border="0" name="pro" class="T_1">
                            <tr align="center" width="100%">
                                <td colspan="2" style="font-size: 23px; font-family: '微软雅黑'; height: 7%">
                                    基本信息
                                    <el-switch v-model="value" active-color="#13ce66" inactive-color="#bebfbe" :change="basic_pro()">
                                    </el-switch>
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6%">
                                <td>
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-eleme"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >竣工面积</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.completedArea"
                                    />
                                </td>
                            </tr>
                            <tr style="height: 7%">
                                <td style="width: 50%; height: 7%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-platform-eleme"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >竣工新增旱地面积</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.newLandArea"
                                    />
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6.5%">
                                <td style="width: 50%; height: 7%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-delete"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >竣工旱地改水面积</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.waterImprovementArea"
                                    />
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6.5%">
                                <td style="width: 50%; height: 7%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-platform-eleme"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >竣工垦造水田面积</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.paddyField"
                                    />
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6.5%">
                                <td style="width: 50%; height: 7%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-setting"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >项目区位</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.proLocation"
                                    />
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6.5%">
                                <td style="width: 50%; height: 7%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-user-solid"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >立项时间</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.projectApproval"
                                    />
                                    
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6.5%">
                                <td style="width: 50%; height: 7%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-user"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >竣工时间</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6.5%">
                                <td style="width: 50%; height: 7%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-phone"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >实施单位</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.implCompany"
                                    />
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6.5%">
                                <td style="width: 50%; height: 7%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-phone-outline"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >施工单位</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.constructionUnit"
                                    />
                                </td>
                            </tr>
                            <tr style="width: 50%; height: 6.5%">
                                <td style="width: 50%; height: 6%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-star-on"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >监理单位</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.supervisorCompany"
                                    />
                                </td>
                            </tr>
                        </table>
                        <table style="width: 100%; height: 25%; color: #fff; padding: 0% 0%" border="0" name="pro1" class="T_2">
                            <tr align="center" width="100%" height="10%">
                                <td colspan="2" style="font-size: 23px; font-family: '微软雅黑'">
                                    项目状态
                                    <el-switch v-model="value1" active-color="#13ce66" inactive-color="#bebfbe" :change="basic_pro1()">
                                    </el-switch>
                                </td>
                            </tr>
                            <tr style="height: 7%" name="pro1">
                                <td style="width: 50%; text-align: center">
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #00ffff; font-family: '微软雅黑'; text-align: center; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.projectApproval"
                                    /><br />
                                    <span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left">立项时间</span>
                                </td>
                                <td style="width: 50%; text-align: center">
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #00ffff; font-family: '微软雅黑'; text-align: center; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                        name="pro1"
                                    /><br />
                                    <span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left">竣工时间</span>
                                </td>
                            </tr>

                            <tr name="pro1">
                                <td style="width: 50%; text-align: center">
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #00ffff; font-family: '微软雅黑'; text-align: center; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.completedTime"
                                        name="pro1"
                                    /><br />
                                    <span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >拟竣工时间</span
                                    >
                                </td>
                                <td style="width: 50%; text-align: center">
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #00ffff; font-family: '微软雅黑'; text-align: center; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                        name="pro1"
                                    /><br />
                                    <span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >竣工倒计时</span
                                    >
                                </td>
                            </tr>

                            <!-- <tr >
                            <td style="width: 50%; text-align: center">
                               &nbsp;
                            <td style="width: 50%; text-align: center">
                                &nbsp;
                            </td>
                        </tr> -->
                        </table>
                    </table>
                </div>

                <div style="width: 26.5%; height: 64%; float: right; padding: 6% 1%">
                    <table style="width: 100%; height: 100%; color: #fff" border="0">
                        <table style="width: 100%; height: 45%; color: #fff" border="0" name="pro2" class="T_3">
                            <tr align="center" width="100%" height="15%" style="font-size: 23px; font-family: '微软雅黑'">
                                <td colspan="2">
                                    报警信息
                                    <el-switch v-model="value2" active-color="#13ce66" inactive-color="#bebfbe" :change="basic_pro2()">
                                    </el-switch>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%; height: 15%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-star-off"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >预警时间</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%; height: 15%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-s-goods"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >预警事项</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%; height: 15%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-goods"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >通知状态</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%; height: 15%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-warning"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >处理状态</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%; height: 15%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-warning-outline"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >处理人员</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                        </table>
                        <table style="width: 100%; height: 55%; color: #fff" border="0" name="pro3" class="T_4">
                            <tr align="center" width="100%" height="14%" style="font-size: 23px; font-family: '微软雅黑'">
                                <td colspan="2">
                                    打卡信息
                                    <el-switch v-model="value3" active-color="#13ce66" inactive-color="#bebfbe" :change="basic_pro3()">
                                    </el-switch>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%; height: 10%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-phone-outline"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >施工单位</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.constructionUnit"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-phone-outline"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >项目负责人</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-question"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >打卡时间</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-star-on"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >监理单位</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.supervisorCompany"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-star-on"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >项目负责人</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%">
                                    &nbsp;&nbsp;&nbsp;
                                    <i class="el-icon-question"></i>
                                    &nbsp;<span style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left"
                                        >打卡时间</span
                                    >
                                </td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input
                                        type="text"
                                        style="font-size: 15px; color: #ffffff; font-family: '微软雅黑'; text-align: left; width: 73%"
                                        disabled="disabled"
                                        class="i_1"
                                        v-model="data.title"
                                    />
                                </td>
                            </tr>
                            <tr style="height: 0.5%">
                                <td style="width: 50%">&nbsp;&nbsp;&nbsp;</td>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            </tr>
                        </table>
                    </table>
                </div>

                <div style="width: 100%; height: 8%; bottom: 0px; position: absolute">
                    <div name="pro_1" class="S_1" style="display: none;">
                        <div style="float: left; padding: 6.5% 4.5%">基本信息</div>
                        <div style="float: left; margin-top: 2%">
                            <el-switch v-model="value" active-color="#13ce66" inactive-color="#bebfbe" :change="basic_pro()"> </el-switch>
                        </div>
                    </div>

                    <div style="float: left">&nbsp;</div>
                    <div name="pro_2" class="S_1" style="display: none">
                        <div style="float: left; padding: 6.5% 4.5%">项目状态</div>
                        <div style="float: left; margin-top: 2%">
                            <el-switch v-model="value1" active-color="#13ce66" inactive-color="#bebfbe" :change="basic_pro1()"> </el-switch>
                        </div>
                    </div>

                    <div style="float: left">&nbsp;</div>
                    <div name="pro_3" class="S_1" style="display: none">
                        <div style="float: left; padding: 6.5% 4.5%">报警信息</div>
                        <div style="float: left; margin-top: 2%">
                            <el-switch v-model="value2" active-color="#13ce66" inactive-color="#bebfbe" :change="basic_pro2()"> </el-switch>
                        </div>
                    </div>

                    <div style="float: left">&nbsp;</div>
                    <div name="pro_4" class="S_1" style="display: none">
                        <div style="float: left; padding: 6.5% 4.5%">打卡管理</div>
                        <div style="float: left; margin-top: 2%">
                            <el-switch v-model="value3" active-color="#13ce66" inactive-color="#bebfbe" :change="basic_pro3()"> </el-switch>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 23%; height: 99%; float: right">
            <el-tabs type="border-card" style="height: 100%; width: 100%" stretch="true">
                <el-tab-pane>
                    <span slot="label" class="tabPaneZd"><i class="el-icon-receiving" style="font-size:20px;"></i><font> 档案袋</font></span>
                    <div style="width: 100%; height: 100%">
                        <el-input placeholder="搜索项目名称" v-model="text">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                        <el-tree
                            :data="tree1"
                            :props="defaultProps"
                            accordion
                            node-key="id"
                            ref="tree"
                            @node-click="handleNodeClick"
                            @check="handleClick"
                            font-size="15px"
                            id="tree_1"
                            check-strictly
                        >
                            <span class="1" slot-scope="{ node }">
                                <!-- :class=" role == group ? '' : 'el-icon-collection'"  -->
                                <span style="font-size: 15px; font-family: '微软雅黑'"> {{ node.label }} </span>
                            </span>
                        </el-tree>
                    </div>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"
                        ><i class="el-icon-lollipop"  style="font-size:20px;"></i><font class="lableFont"> 电子地图</font></span
                    >
                </el-tab-pane>
            </el-tabs>

        </div>
        
        <div class="footer" id="app-footer" style="float: right;">
            <i class="el-icon-s-help" style="padding-left:15px;"></i>
            <i class="el-icon-microphone" style="padding-left:15px;"></i>
            <i class="el-icon-turn-off-microphone" style="padding-left:15px;"></i>
            <i class="el-icon-zoom-in" style="padding-left:15px;"></i>
            <i class="el-icon-video-camera-solid" style="padding-left:15px;"></i>
            <i class="el-icon-camera-solid"></i>
            &nbsp;
        </div>
    </div>
</template>
<script>
import pro from '@/api/lx_infor/lx_infor'
export default {
    data() {
        return {
            // 基本信息
            data: {
                title: '测试项目',
                proName:'',
                proLocation:'',
                completedArea:'',
                newLandArea:'',
                waterImprovementArea:'',
                paddyField:'',
                projectApproval:'',
                completedTime:'',
                implCompany:'',
                constructionUnit:'',
                supervisorCompany:'',
            },
            // 报警信息
            warning:{
                time:'',
                sx:'',
                status:'',
                cl:'',
                man:''
            },
            card:{

            },
            text: '',
            tree1: [
                {
                    id:1,
                    label: '桐君街道(80/100)',
                    children: [
                        {
                            id:"eb0fa760-1c31-4936-a946-903f9682aeb0",
                            label: '桐庐县桐君街道XX村旱地改水田提升项目'
                        }
                    ]
                },
                {
                    id:2,
                    label: '城南街道(23/100)',
                    children: [
                        {
                            id:"eb0fa760-1c31-4936-a946-903f9682aeb0",
                            label: '桐庐县城南街道XX村旱地改水田提升项目'
                        }
                    ]
                },
                {
                    id:3,
                    label: '旧县街道(40/100)',
                    children: [
                        {
                            id:"eb0fa760-1c31-4936-a946-903f9682aeb0",
                            label: '桐庐县旧县街道XX村旱地改水田提升项目'
                        }
                    ]
                },
                {
                    id:4,
                    label: '凤川街道(30/100)',
                    children: [
                        {
                            id:"eb0fa760-1c31-4936-a946-903f9682aeb0",
                            label: '桐庐县凤川街道XX村旱地改水田提升项目'
                        }
                    ]
                },
                {
                    id:5,
                    label: '江南镇(28/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县江南镇XX村旱地改水田提升项目（2019）',
            
                        },
                        {
                            id:8,
                            label: '桐庐县江南镇XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:6,
                    label: '横村镇(57/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县横村镇XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县横村镇XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:7,
                    label: '富春江镇(65/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县富春江镇XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县富春江镇XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:8,
                    label: '旧县街道(76/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县旧县街道XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县旧县街道XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:9,
                    label: '瑶琳镇(28/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县瑶琳镇XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县瑶琳镇XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:10,
                    label: '分水镇(89/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县分水镇XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县分水镇XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:11,
                    label: '百江镇(67/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县百江镇XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县百江镇XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:12,
                    label: '钟山镇(43/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县钟山乡中一村元子庵旱地改水田提升项目（2019）',
            
                        },
                        {
                            id:8,
                            label: '桐庐县钟山乡中一村元子庵旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:13,
                    label: '新合乡(23/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县新合乡XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县新合乡XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:14,
                    label: '莪山乡(47/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县莪山乡XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县莪山乡XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                {
                    id:15,
                    label: '合村乡(42/100)',
                    children: [
                        {
                            id:7,
                            label: '桐庐县合村乡XX村旱地改水田提升项目',
            
                        },
                        {
                            id:8,
                            label: '桐庐县合村乡XX村旱地改水田提升项目（2020）',
                            
                        }
                    ]
                },
                
            ],
            
            tableChecked: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            value: true,
            value1: true,
            value2: true,
            value3: true,
            leafCheckedNodes: [],
            checkedNodes: ''
        };
    },
    created() {
        setTimeout(function () {
            setTreeIcon();
        }, 10);
        this.getList();
    },
    methods: {
        basic_pro() {
            if (this.value == true) {
                $("[name='pro']").show();
                $("[name='pro_1']").hide();
            } else {
                $("[name='pro']").hide();
                $("[name='pro_1']").show();
            }
        },
        basic_pro1() {
            if (this.value1 == true) {
                $("[name='pro1']").show();
                $("[name='pro_2']").hide();
            } else {
                $("[name='pro1']").hide();
                $("[name='pro_2']").show();
            }
        },
        basic_pro2() {
            if (this.value2 == true) {
                $("[name='pro2']").show();
                $("[name='pro_3']").hide();
            } else {
                $("[name='pro2']").hide();
                $("[name='pro_3']").show();
            }
        },
        basic_pro3() {
            if (this.value3 == true) {
                $("[name='pro3']").show();
                $("[name='pro_4']").hide();
            } else {
                $("[name='pro3']").hide();
                $("[name='pro_4']").show();
            }
        },
        // getCheckedNodes() {
        //     this.checkedNodes = this.$refs.tree.getCheckedNodes();
        // },
        
        //点击用户树
        handleNodeClick(data, checked, node) {
            if (checked) {
                this.$refs.tree.setCheckedNodes([data]);
                //将数据传入到List
                this.$refs.tree.getCheckedNodes([data]);
                
                //获取选中目标信息
                this.getInfor(this.$refs.tree.getCheckedKeys());
                // this.list = null
                this.leafCheckedNodes = [];
                
            }
        },
        // 模糊查询
        search() {
            pro.search().then((response) => {
                this.data2 = response.data;
            });
        },
        getInfor(id){
            pro.openInfo(id).then(response => {
                
                this.data = response.data
                this.data.projectApproval = this.dateFormat('YYYY-mm-dd ',this.data.projectApproval)
            })
        },
        dateFormat(fmt, date) {
            if(date != null){
            let ret="";
            date=new Date(date);
            const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
      }else{
          return ''
      }
    },
        // 获取数据树
        getList() {}
    }
};
function setTreeIcon() {
    var icon = $('#tree_1').children('div');
    for (var i = 0; i < icon.length; i++) {
        var a = $(icon[i]).children('.el-tree-node__content').find('.1');
        console.log(a[0] );
        for(var n = 0 ; n<a.length;n++){
            $(a[n]).attr('class','el-icon-document-copy')
        }
        // }
        // for(var n = 0; n<a.length;n++){
        //     console.log(a[n])
        //     $(a[n]).attr('class','')
        // }
    }
}
</script>
<style>
.el-icon-document-copy {
    background-image: url('../../../assets/img/文件夹.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
.el-icon-document-copy:before {
    visibility: hidden;
}

.footer {
    font-size: 20px;
    line-height:35px;
    width: 100%;
    position: fixed;
    right: 0px;
    height: 3%;
    bottom: 0;
    text-align: right;
    background-image: url('../../../assets/img/底图.png');
    background-size: 100% 100%;
}
.S_1 {
    background-image: url('../../../assets/img/边框.png') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 5.8%;
    float: left;
    font-size: 13px;
    color: #fff;
    height: 25px;
    vertical-align: middle;
    text-align: center;
    line-height: 10px;
}
.T_1 {
    background-image: url('../../../assets/img/基本信息.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
.T_2 {
    background-image: url('../../../assets/img/项目状态.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
.T_3 {
    background-image: url('../../../assets/img/报警信息.png') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.T_4 {
    background-image: url('../../../assets/img/打卡信息.png') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.el-icon-info {
    background-image: url('../../../assets/img/文件夹.png') !important;
    background-size: 20% 100%;
    background-repeat: no-repeat;
}
.el-icon-info::before {
    visibility: hidden;
}
.el-icon-question {
    background-image: url('../../../assets/img/打卡时间_1.png') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.el-icon-question:before {
    visibility: hidden;
}
.el-icon-warning-outline {
    background-image: url('../../../assets/img/处理人员_1.png') !important;
    background-size: 100% 100%;
}
.el-icon-warning-outline:before {
    visibility: hidden;
}
.el-icon-warning {
    background-image: url('../../../assets/img/处理状态_1.png') !important;
    background-size: cover;
}
.el-icon-warning:before {
    visibility: hidden;
}
.el-icon-goods {
    background-image: url('../../../assets/img/通知状态.png') !important;
    background-size: cover;
}
.el-icon-goods:before {
    visibility: hidden;
}
.el-icon-s-goods {
    background-image: url('../../../assets/img/预警事项.png') !important;
    background-size: cover;
}
.el-icon-s-goods:before {
    visibility: hidden;
}
.el-icon-star-off {
    background-image: url('../../../assets/img/预警时间.png') !important;
    background-size: 100% 100%;
}
.el-icon-star-off:before {
    visibility: hidden;
}
.el-icon-star-on {
    background-image: url('../../../assets/img/监理单位.png') !important;
    background-size: cover;
}
.el-icon-star-on:before {
    visibility: hidden;
}
.el-icon-phone-outline {
    background-image: url('../../../assets/img/施工单位.png') !important;
    background-size: cover;
}
.el-icon-phone-outline:before {
    visibility: hidden;
}
.el-icon-phone {
    background-image: url('../../../assets/img/实施单位.png') !important;
    background-size: cover;
}
.el-icon-phone:before {
    visibility: hidden;
}
.el-icon-user {
    background-image: url('../../../assets/img/竣工时间.png') !important;
    background-size: cover;
}
.el-icon-user:before {
    visibility: hidden;
}
.el-icon-user {
    background-image: url('../../../assets/img/竣工时间.png') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.el-icon-user:before {
    visibility: hidden;
}
.el-icon-user-solid {
    background-image: url('../../../assets/img/立项时间.png') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.el-icon-user-solid:before {
    visibility: hidden;
}
.el-icon-setting {
    background-image: url('../../../assets/img/项目区位.png') !important;
    background-size: 98% 105%;
    background-repeat: no-repeat;
}
.el-icon-setting:before {
    visibility: hidden;
}
.el-icon-delete {
    background-image: url('../../../assets/img/竣工新增旱地改水面积.png') !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.el-icon-delete:before {
    visibility: hidden;
}
.el-icon-platform-eleme {
    background-image: url('../../../assets/img/竣工新增旱地面积.png') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.el-icon-platform-eleme:before {
    visibility: hidden;
}
.el-icon-eleme {
    background-image: url('../../../assets/img/竣工面积.png') !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.el-icon-eleme:before {
    visibility: hidden;
}
.el-icon-lollipop {
    background-image: url('../../../assets/img/电子地图.png') !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.el-icon-lollipop:before {
    visibility: hidden;
}






.el-tree {
    height: 96%;
}
.el-tree-node__label {
    font-size: 15px;
    font-family: '微软雅黑';
}
.el-tree-node__content > .el-tree-node__expand-icon {
    padding: 5px;
}
.D_1 {
    background-image: url('../../../assets/img/背景.png');
    background-size: cover;
}
.d_2 {
    background-image: url('../../../assets/img/项目标题.png');
    background-size: cover;
    z-index: 2;
}
.i_1 {
    background-color: transparent !important;
    border: 0;
}
.l_1 {
    background-image: url('../../../assets/img/左边.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.r_1 {
    background-image: url('../../../assets/img/右边.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#app-footer .el-icon-s-help {
    background-image: url('../../../assets/img/照相机.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
#app-footer .el-icon-s-help:before {
    visibility: hidden;
}

#app-footer .el-icon-microphone {
    background-image: url('../../../assets/img/摄影机.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
#app-footer .el-icon-microphone:before {
    visibility: hidden;
}

#app-footer .el-icon-turn-off-microphone {
    background-image: url('../../../assets/img/搜索.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
#app-footer .el-icon-turn-off-microphone:before {
    visibility: hidden;
}

#app-footer .el-icon-zoom-in {
    background-image: url('../../../assets/img/音量.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
#app-footer .el-icon-zoom-in:before {
    visibility: hidden;
}

#app-footer .el-icon-video-camera-solid {
    background-image: url('../../../assets/img/麦克风.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
#app-footer .el-icon-video-camera-solid:before {
    visibility: hidden;
}
#app-footer .el-icon-camera-solid {
    background-image: url('../../../assets/img/放大.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
#app-footer .el-icon-camera-solid:before {
    visibility: hidden;
}

</style>